<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>餐厅实况</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<link href="../assets/css/imagebox/image_box.css" rel="stylesheet" />
		<link href="../assets/css/motai.css" rel="stylesheet" />
		<link href="../assets/css/content.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		<script src="../assets/js/respond.min.js"></script>
		<![endif]-->

	</head>

	<body>
		<!--内容区域-->
		<div class="content">

			<!-- 头部的餐厅选择 -->
			<div class="content-header col-md-12">
				<div class="con-header">
					<div class="col-md-7 col-sm-7 col-xs-7">
						<span class="content-title-pre"></span><span class="content-title-word">餐厅实况</span>
					</div>
					<div class="col-md-5 col-sm-5 col-xs-5">
						<button type="button" class="btn btn-info btn-header" data-toggle="modal" data-target="#xuanze-store">选择门店</button>
					</div>
				</div>
			</div>

			<div class="content_serach row"></div>
			<!-- botstrop 的内容 -->
			<div class="container-fluid mt20">
				<div class="row">
					<ul class="ul_turnover ctsk">
						<li>
							<p>25000元</p>
							<span>营业额</span>
						</li>
						<li>
							<p>252100千元</p>
							<span>已结</span>
						</li>
						<li>
							<p>00元</p>
							<span>未结</span>
						</li>
						<li>
							<p>20/50</p>
							<span>桌位</span>
						</li>
						<li class="border-rt">
							<p>49</p>
							<span>累计翻台</span>
						</li>
						<div class="clearfix"></div>
					</ul>
				</div>

				<div class="row mt20 table_detial">
					<div class="col-sm-12">桌位情况</div>
				</div>

				<!-- 桌位情况 -->
				<div class="row padding_row ctsk_list">

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3  pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat ">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>
					<div class="col-xs-3 col-lg-2 col-md-2 col-sm-3 pding-lr">
						<div class="seat">
							<p>A01</p>
							<span>空闲</span>
						</div>
					</div>

				</div>

			</div>
		</div>
		<div class="modal fade" id="xuanze-store" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">

					<!--添加评价项 -->
					<div class="modal-header">
						<div class="zuo-close" data-dismiss="modal">
							<i class="iconfont icon-o1"></i>
						</div>
						<h5 class="modal-title" id="myModalLabel">选择门店</h5>
					</div>
					<div class="modal-body height232">

						<div class="row select_mendian_row">
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>云南涮烤白鱼旗舰店</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>
							<div class="col-sm-4 col-lg-3 col-xs-6 select_mendian"><span>fdafsdfsflsal</span></div>

						</div>

					</div>
					<div class="modal-footer shangjiaguanli_foot">
						<button type="button" class="btn save">确定</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</body>

	<script src="../assets/js/jquery.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>
	<script src="../assets/js/main.js"></script>
	<script type="text/javascript">
		$('.seat').on('click', function() {
			if($(this).hasClass('active')) {
				$(this).removeClass('active')
				$(this).children('span').html('空闲')
			} else {
				$(this).addClass('active')
				$(this).children('span').html('使用')

			}
		})
		$('.select_mendian_row span').on('click', function() {
			$(this).parent().siblings().children('span').removeClass('active');
			$(this).addClass('active')
		})
	</script>

</html>